<template>
    <page-view>
        <page-header :showBack="true" title="注册"></page-header>
        <div class="content-box">
            <Form>
                <cell-group inset>
                    <field
                    v-model="nickName"
                    name="昵称"
                    label="昵称"
                    placeholder="请输入昵称"
                    :rules="[{ required: true, message: '请填写昵称' }]"
                    />
                    <field
                    v-model="password"
                    type="password"
                    name="密码"
                    label="密码"
                    placeholder="请输入密码"
                    :rules="[{ required: true, message: '请填写密码' }]"
                    />
                    <field name="radio" label="性别">
                    <template #input>
                        <radio-group v-model="user_sex" direction="horizontal">
                        <radio name="男">男</radio>
                        <radio name="女">女</radio>
                        </radio-group>
                    </template>
                    </field>
                    <field
                    v-model="user_phone"
                    name="手机号"
                    label="手机号"
                    placeholder="请输入手机号"
                    :rules="[{ required: true, message: '请填写手机号' }]"
                    />
                    <field
                    v-model="user_email"
                    name="邮箱"
                    label="邮箱"
                    placeholder="请输入邮箱"
                    :rules="[{ required: true, message: '请填写邮箱' }]"
                    />
                    
                </cell-group>
                <div style="margin: 16px;">
                <Button round block type="primary" @click="checkRegister()" :loading="loading" loading-text="加载中" :disabled="loading" color="#EE87A9">
                        注册
                    </Button>
                </div>
            </Form>

        </div>
    </page-view>
</template>

<script>

import { Form, Field, CellGroup,Button,Radio ,RadioGroup} from 'vant';
import { reactive, ref, toRefs } from 'vue';
    export default {
  components: { Form, Field, CellGroup,Button,Radio,RadioGroup },
  setup(){
      let loading=ref(false)

    let userInfo=reactive({
        nickName:'',
        user_sex:'男',
        user_phone:'',
        user_email:'',
        user_photo:null,
        password:''

    })
      function checkRegister(){

      }

      return {
          loading,
          checkRegister,
          ...toRefs(userInfo)

      }
  }
        
    }
</script>

<style lang="scss" scoped>

</style>